<template>
<div class="tc-center fl relative">
    <rx-center-title-swiper :data="title">
    <ul class="clearfix uiTab9 j_uiTab9">
        <li :class="{'uiTab9-active':subIndex == index, 'cGreen': index === 2}" @click="subSwitch(index)" v-for="(item, index) of title" :key="index">{{item}}</li>
    </ul>
    </rx-center-title-swiper>
    <div id="j-tc-center-content">
        <!-- 状态 state -->
        <div class="uiTab8Con" v-if="subIndex == 0">
            <rx-state></rx-state>
        </div>
         <!-- 阶段 state -->
        <div class="uiTab8Con" v-if="subIndex == 1">
            <rx-level></rx-level>
        </div>
         <!-- 签约 state -->
        <div class="uiTab8Con" v-if="subIndex == 2  && flag == '签约'" >
            <rx-signing @listenToChildEvent="show"></rx-signing>
        </div>
         <!-- 考察 -->
        <div class="uiTab8Con" v-if="subIndex == 2  && flag == '考察'" >
            <rx-inspect @listenToChildEvent="show"></rx-inspect>
        </div>
         <!-- 认知 -->
        <div class="uiTab8Con" v-if="subIndex == 2  && flag == '认知'" >
            <rx-cognition @listenToChildEvent="show"></rx-cognition>
        </div>
         <!-- 咨询-->
        <div class="uiTab8Con" v-if="subIndex == 2  && flag == '咨询'" >
            <rx-consult @listenToChildEvent="show"></rx-consult>
        </div>
         <!-- 解答 state -->
        <div class="uiTab8Con" v-if="subIndex == 3">
            <rx-answer></rx-answer>
        </div>
         <!-- 标准 state -->
         <!--  && Number(this.userInfo.areaId) === 39 -->
        <div class="uiTab8Con" v-if="subIndex == 4">
            <rx-standard></rx-standard>
        </div>
    </div>
    <transition class="animated faster" enter-active-class="animated faster slideInLeft" leave-active-class="animated faster slideOutLeft">
         <router-view name="center"></router-view>
    </transition>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
// 注: 所有的大组件已 rx-xxx 命名, 不要使用此示例文件命名，可保留作为参考
import rxState from './state'
import rxSigning from './signing'
import rxInspect from './inspect'
import rxCognition from './cognition'
import rxConsult from './consult'
import rxLevel from './level'
import rxAnswer from './answer'
import rxStandard from './standard'
export default {
    components: {
        rxState,
        rxSigning,
        rxInspect,
        rxCognition,
        rxConsult,
        rxLevel,
        rxAnswer,
        rxStandard
    },
    data () {
        return {
            title: [], // ['状态', '阶', '', '解答', '标准']
            subIndex: 0,
            flag: ''
        }
    },
    // mounted () {
    //     this.phaseCheck()
    // },
    created () {
        if (Number(this.userInfo.areaId) === 39) {
            this.title = ['状态', '阶', '', '解答', '标准']
        } else {
            this.title = ['状态', '阶', '']
        }
        this.titleChange()
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    methods: {
        subSwitch (index) {
            this.subIndex = index
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        },
        show (value) {
            this.flag = value
            this.title = ['状态', '阶', `${this.flag}`, '解答', '标准']
        },
        titleChange () {
            // debugger
            if (this.leftInfo.stId !== null && this.leftInfo.stId !== undefined) {
                switch (this.leftInfo.stId) {
                case 0:
                    this.flag = '签约'
                    break
                case 1:
                    this.flag = '咨询'
                    break
                case 2:
                    this.flag = '认知'
                    break
                case 3:
                    this.flag = '考察'
                    break
                case 4:
                    this.flag = '签约'
                    break
                default:
                    break
                }
            }
            this.title = ['状态', '阶', `${this.flag}`, '解答', '标准']
        }
    },
    watch: {
        leftInfo () {
            // if (this.leftInfo.stId !== 1) {
            //     const findIndex = this.leftListData.findIndex((item) => { return item.uid === this.leftInfo.uid })
            //     if (findIndex >= 0) {
            //         // this.$set(this.leftListData[findIndex], 'groupUseHour', 168)
            //         // this.findPmUserInfoList()
            //         this.titleChange()
            //     }
            // } else {
            //     this.titleChange()
            // }
            if (this.leftInfo !== null && this.leftInfo !== undefined && this.leftInfo !== '') {
                this.titleChange()
            }
        }
    },
    $route () {

    }
}
</script>
